html {
    max-width: 1920px;
    max-height: 1200px;
}


/*START LINK STATE _______________________________*/
/* unvisited link */
a:link {
    color: black;
    text-decoration: none;
}

/* visited link */
a:visited {
    color: black;
}

/* mouse over link */
a:hover {
    color: gray;
    opacity: .5;
}

/* selected link */
a:active {
    color: black;
    /*animation: load 2s backwards;*/
}




a2:hover {
    opacity: .5;
}
/*END LINK STATE _______________________________*/

@font-face {
    font-family: NeueHaasDisplayBlack;
    src: url(font/NeueHaasDisplayBlack.ttf);
}

@font-face {
    font-family: NeueHaasDisplayRoman;
    src: url(font/NeueHaasDisplayRoman.ttf);
}



.load {
    position: fixed;
    left: 0;
    top: 0;
    background-color: #F7F8F9;
    width: 100%;
    max-width: 1920px;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    z-index: 100;
    animation: load-2 4s forwards;
    animation-delay: 2s;
}

.load-2 {
    position: fixed;
    left: 0;
    top: 0;
    background-color: #F7F8F9;
    width: 100%;
    max-width: 1920px;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    z-index: 100;
    animation: load-3 1s forwards;
    animation-delay: 1s;
}


.menu-img {
    background-image: url("Pictures/menu-mobil.svg");
    /*background-color:green;*/
    height:8px;
    width:22px;
    position:absolute;
}

.Content{
    width:100%;
    max-width:100%;
    min-width:100%;
    height:100%;
    min-height:100%;
    max-height:100%;
    position:absolute;
    top:0px;
    left:0px;
}
.menu-x {
    display: block;
    z-index: 999;
    position: absolute;
    left: 0;
    top: 0;
    height: 62px;
    width: 100px;
    background-color: ;
}
   
.menu{
    display:flex;
    justify-content:center;
    position:fixed;
    top:-300px;
    left:0px;
    width:100%;
    height:362px;
    z-index:20;
}

@keyframes menu {
    0% {
        top: -300px;
    }

    100% {
        top: 0px;
    }
}

.menu:hover, .menu: {
    animation: menu 1s ease-in-out forwards;
}

    .menu:hover .menu-logo {
        animation: logo 1s ease-in-out forwards;
    }


.menu-logo {
    transform: translate(-50%, 0%);
    position: fixed;
    top: 11px;
    left: 50%;
}
.logo{
    
}
@keyframes logo {
    0% {
        width: 46px;
    }

    100% {
        width: 46px;
    }
}
.nav-btn-lines{
    transform-origin:center;
    position:fixed;
    left:5%;
    top:38px;
    height:22px;
    overflow:hidden;
}
@keyframes menu-btn {
    0% {
        height: 22px;
    }

    100% {
        height: 5px;
    }
}

.menu:hover .nav-btn-lines {
    animation: menu-btn 1s ease-in-out forwards;
}

.links{
    
    position:absolute;
    top:50px;
    left:5%;
    width:100%;
    height:362px;
    opacity:0;
}
    .links ul {
        color: #000000;
        padding: 0;
        margin: 0;
        position: inherit;
        font: normal;
        font-family: NeueHaasDisplayRoman;
    }

    .links li {
        color: #000000;
        position: relative;
        top: 0px;
        left: 0px;
        width: 117px;
        height: 19px;
        margin: 0px;
        padding: 0px;
        margin-bottom: 49px;
        /*background-color: green;*/
        list-style: none;
    }
@keyframes links {
    0% {
        transform:translateY(+0px);
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    100% {
        transform: translateY(+50px);
        opacity: 1;
    }
}

.menu:hover .links {
    animation: links 1s ease-in-out forwards;
}

.sprache {
    
    position: fixed;
    top: 21px;
    right: 26px;
    left:auto;
    width: 21px;
    height: 21px;
    margin: 0px;
    padding: 0px;
    margin-bottom: 0px;
    font-size: 16px;
    text-align: right;
    font-family: NeueHaasDisplayRoman;
    letter-spacing: 1.2px;
    color: #623432;
    opacity: 1;
    cursor: pointer;
}

#eng{
	left:90%;
	
}


.index-pic {
    background-image: url(Pictures/zp-start-mob.jpg);
}
.menu-pic {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    max-width: max-content;
    overflow: hidden;
}
.logo-name {
    top: 22vh;
    left: 0px;
    
    animation-delay: 2s;
    display: grid;
    align-items: center;
    justify-items: center;
    background-size: contain;
    background-image: url(Pictures/icons/zup_wortmarke.svg);
    background-position: center;
    background-repeat: no-repeat;
}
.text-pic {
    display: grid;
    align-content: center;
    position: relative;
    top: 62px;
    left: 0px;
    min-height: 200px;
    height: 55vw;
    max-height:;
    min-width: 100%;
    width: 100%;
    background-position: center;
    background-position-y: -192px;
}
#unternehmen{
    overflow:scroll;
    overflow-x:hidden;
}
.pic-3{
    display:none;
}
.pic-4 {
    display: grid;
    align-content: center;
    position: relative;
    top: 62px;
    left: -10vw;
    min-height: 200px;
    height: 80vw;
    max-height:;
    min-width: 100%;
    width: 100vw;
    margin-bottom:100px;
    background-position: center;
    background-position-y: -192px;
}
.text-pic-2 {
    display: grid;
    align-content: center;
    position: relative;
    top: 62px;
    left: 0px;
    min-height: 200px;
    height: 35%;
    max-height: 240px;
    min-width: 100%;
    width: 100%;
}
.text-pic-content{
    width:100%;
    height:auto;
}
.text-pic-content-2 {
    position:relative;
    top:0px;
    width: 100%;
    height: auto;
}
.menu-pic-content {
    height: 100%;
    width: auto;
}
.text-box {
    position: relative;
    top: ;
    left: 0px;
    height:1200px ;
    min-width: 100%;
}
.text-box-2 {
    position: relative;
    top:50px;
    left: 0px;
    height: 1200px;
    width: 100%;
}
/*leistungen-2*/
.text-content-2{
    display:block;
    justify-content:space-between;
    left:0%;
    width:100%;
    height:1200px;
    

}
.info {
    display: flex;
    justify-content: space-between;
    left: 110px;
    width: 100%;
    margin-bottom: 0px;
    background-color: #F7F8F9;
    border-bottom: groove;
    border-bottom-color: black;
    border-bottom-width: thin;
    
}
/*.info {
		position: relative;
		left: 110px;
		top: 0px;
		width: 333px;
		height: 77px;
		margin-bottom: 49px;
		cursor: pointer;
	}*/
.info-sub{
    display:none;
}

#info-t1 {
    position: relative;
    left: 15%;
    width: 70%;
    min-width: 300px;
    margin-top: auto;
    margin-bottom: auto;
}

    #info-t2 {
    position: relative;
    left: 15%;
    width: 70%;
    min-width: 300px;
    margin-top: auto;
    margin-bottom: auto;
}
#info-t3 {
    position: relative;
    left: 15%;
    width: 70%;
    min-width: 300px;
    margin-top: auto;
    margin-bottom: auto;
}
#info-t4 {
    position: relative;
    left: 15%;
    width: 70%;
    min-width: 300px;
    margin-top: auto;
    margin-bottom: auto;
}
#info-t5 {
    position: relative;
    left: 15%;
    width: 70%;
    min-width: 300px;
    margin-top: auto;
    margin-bottom: auto;
}
.btn-info-down {
    display:none;
    position: absolute;
    top: 13px;
    right: 1%;
    align-content: center;
    background-color:green;
    /*background-color: rgba(255,255,255,0.2); */
    width: 50px;
    height: 50px;
    /* margin: auto; */
    display: flex;
    justify-content: left;
    /* color: white; */
    letter-spacbting: 0.32px;
    opacity: 1;
    margin-top: auto;
    line-height: 27px;
    margin-bottom: auto;
}
#info-off {
    display: block ;
}
    .details{
        left:15%;
        transform:translateX(-43px);
    
    top:120px;
    width:90%;
    max-width:800px;
    height:600px;
    overflow-y:scroll;
   
    overflow-x:visible;
    
}

    .icon{
        left:-14px;
    }
/*.details {
    position: absolute;
    left: 699px;
    top: 0px;
    width: 627px;
    height: fit-content;
    margin-bottom: 0px;
    opacity: 0;
}*/



#details-1 {
    top:112px;
    opacity:0;
}

#details-2 {
    top: 112px;
}

#details-3 {
    top: 112px;
}

#details-4 {
    top: 112px;
}

#details-5 {
    top:112px;
    height:fit-content;
}
.indicator{
    position:absolute;
    left:5%;

}
.indicator2 {
    top: 105px;
}

.text-content-2 {
    top:10px;
}
.profil-content {
    top:20px;
}

.float-content{
    top:30%;
    width:50%;
    max-width:446px;
}
.float-text {
    margin-bottom: 20%;
}


.btn-box {
    position: absolute;
    justify-content: left;
    right:auto;
    left:30%;
    top: auto;
    bottom: 20px;
    height:fit-content;
}
.btn-box2 {
    width:calc(100vw - 50px);
    display:flex;
    justify-content:center;
    top:auto;
    left:25px;
    right:auto;
    bottom:20px;
    margin-bottom:0;
}
#btn-box-leistung{
    display:none;
}
.btn-team-info{
    justify-content:center;
}
.team-btn{
    top:100%;
    left:0px;
    width:calc(100vw);
    justify-content: center;
    /*height: auto;*/
}
@keyframes team-load {
    0% {
        top: 100%;
    }

    100% {
        top: 62px;
    }
}
.btn-location {
    position:relative;
    right:auto;
}
/*.btn-location{
    right:-14px;
}*/
.profil-box {
    /*top: 0;*/
    width: fit-content;
    left: 0;
    margin-right:0;
    justify-content: center;
    height: calc(100vh - 133px);
    align-items: flex-start;
    align-content: flex-start;
}

.profil-box > div:last-child {
    padding-bottom: 100px;
}
/*.kontakt-info-2{
    top:530px;
}*/


.h1-1{
    top:120px;
    left:15%;
    font-size:40px;
    line-height:53px;
    min-width:340px;
}
.p1-1{
    width:93%;
    left:20px;
    margin-right:0px;
    
}
.team-pic {
    display: grid;
    align-content: center;
    position: relative;
    top: 62px;
    left: 0px;
    min-height: 200px;
    height: 80vw;
    max-height: ;
    min-width: 100%;
    width: 100%;
    background-position:top;
}
.kontakt-pic{
    background-position-y:-125px;
}